<template>
  <div>
    <nav-bar title="商品详情页"/>
    <div class="wrap">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in pics" :key="banner.id">
          <img :src="banner.pic" alt="">
        </van-swipe-item>
      </van-swipe>
      <!-- <h3 v-if="detail.basicInfo"> -->
        <!-- 方法二，用v-if来解决，初始没有这个就不渲染，检测到有了再渲染 -->
      <h3>
        {{ basicInfo.name }}
      </h3>
      <div class="content" v-html="content"></div>
    </div>
    <!-- 商品弹出层 -->
    <van-popup
      position="bottom"
      :style="{height: '35%'}"
      closeable
      round
      v-model="show">
        <div class="sku-wrap">
          <van-card
            :num="sku.number"
            :price="sku.minprice"
            :title="sku.name"
            :thumb="sku.pic"
          >
            <template #footer>
              <van-stepper v-model="sku.number" />
              <van-button
                @click="commitItem"
                size="large"
                color="red">确认</van-button>
            </template>
          </van-card>
        </div>
      </van-popup>
    <!-- /商品弹出层 -->
    <van-goods-action>
      <van-goods-action-icon @click="$router.push('/home')" icon="wap-home-o" text="首页" />
      <van-goods-action-icon @click="$router.push('/cart')" icon="cart-o" text="购物车" :badge="$store.state.cart.items.length||''" />
      <van-goods-action-button
        @click="showSku(1)"
        type="warning"
        text="加入购物车" />
      <van-goods-action-button
        @click="showSku(0)"
        type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import NavBar from '../../components/NavBar.vue'
import { fetchItemDetail, addCart } from '@api'
import { Toast } from 'vant'
export default {
  data () {
    return {
      // basicInfo: {} //解决异步请求，数据还没过来先渲染后报错，方法一，给basicInfo定义一个空对象，解析成undefind，不会报错
      basicInfo: {},
      pics: [],
      content: '',
      sku: {
        // 增加到购物车 （提交订单）中 商品的规格
        number: 1
      },
      show: false, // 弹出层的显示
      actionType: 1 // 1是加入购物车  0是立即购买
    }
  },
  created () {
    this.fetchDetail()
  },
  methods: {
    commitItem () {
      // 点击商品详情的确认按钮
      /*
        点击加入购物车 弹出 加入购物车
        点击立即购买 弹出 提交订单
      */
      if (this.actionType) {
        addCart({
          goodsId: this.sku.id,
          number: this.sku.number,
          token: localStorage.getItem('token')
        }).then(res => {
          if (res.data.code === 0) {
            this.$store.commit('cart/init_cart_info', {
              items: res.data.data.items,
              total: res.data.data.price
            })
            Toast({
              type: 'success',
              message: '加入成功'
            })
          }
        })
      } else {
        alert('提交订单')
      }
      this.show = false
    },
    // 显示商品规格弹出层
    showSku (type) {
      this.show = true
      this.actionType = type
    },
    fetchDetail () { // 获取商品详情
      fetchItemDetail(this.$route.params.id).then(res => {
        // console.log(res)
        if (res.data.code === 0) {
          this.basicInfo = res.data.data.basicInfo
          this.pics = res.data.data.pics // 使用正则匹配img,改变样式
          this.content = res.data.data.content.replace(/<img/gi, '<img style="display:block;width:100%"')
          this.sku = {
            ...this.sku,
            ...res.data.data.basicInfo
          }
        }
      })
    }
  },
  components: {
    NavBar
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  padding-top: 46px;
  padding-bottom: 40px;
  .my-swipe{
    img{
      width: 100%;
    }
  }
  // .content {
  //   /deep/ img{
  //     display: block;
  //     width: 100%;
  //   }
  // }
}
.sku-wrap{
    box-sizing: border-box;
    padding: 10px;
    background-color: #fafafa;
    height: 100%;
  }
</style>
